@import '../var';

.home-box {
    padding-top: 80px;
    padding-bottom: 60px;
    //($newYearBg);
    .content-box{
        overflow: hidden;
        @extend .w;
            .left-box{
                @extend .fl;
                width: 880px;
            }
            .right-box{
                @extend .fl;
                width: 300px ;
                margin-left: 20px;
                margin-top: 20px;
                    .right-content-wrap {
                        height:1024px;
                        &:nth-of-type(2),
                        &:nth-of-type(3){
                            margin-top: 130px;
                        }
                        &:nth-of-type(1),
                        &:nth-of-type(2) {
                            .NewsRightModules:nth-of-type(2) {
                                .ModulesWrap-box {
                                    //@extend .scrollStyle;
                                    height: 336px;
                                }
                            }
                            .NewsRightModules:nth-of-type(3) {
                                .ModulesWrap-box {
                                    //@extend .scrollStyle;
                                    height: 396px;
                                }
                            }
                        }
                        &:nth-of-type(3) {
                            .NewsRightModules:nth-of-type(2) {
                                .ModulesWrap-box {
                                   // @extend .scrollStyle;
                                    height: 482px;
                                }
                            }
                        }
                    }
            }
    }
    .home-footer-swiper {
        @extend .w;
        @include bg($themeBg);
        border:1px solid $border;
        //margin-bottom: 60px;
        padding: 10px 40px;
        @extend .pr;
        .ant-carousel .slick-dots li.slick-active button {
            background: $theme;
        }
            .left-arrow,
            .right-arrow {
                @include wh(22px,22px);
                @extend .pa;
                top: 50%;
                margin-top: -11px;
                    &:hover {
                        @extend .pointer;
                    }
            }
            .left-arrow {
                left:0;
                @include bgImg('utils','leftArrow');
            }
            .right-arrow {
                right:0;
                @include bgImg('utils','rightArrow');
            }
            .footer-ad-swiper {
                a {
                    @extend .dib;
                    @include wh(350px,90px);
                    @include va;
                    &:nth-of-type(2){
                        margin: 0 30px;
                    }
                    img {
                        height: 90px;
                    }
                }
            }
    }
    // 首页弹窗样式
    .popUpWrap {
        .mask {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            height: 100%;
            background-color: rgba(0,0,0,.45);
            filter: alpha(opacity=50);
        }
        .popUp {
            width: 780px;
            height: 400px;
            position: fixed;
            top: 50%;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            margin: 0 auto;
            margin-top: -200px;
            animation: fadeInDownBig 2s;
            -webkit-animation: fadeInDownBig 2s;
            img {
                display: block;
            }
            .delete {
                position: absolute;
                right: 5px;
                top: 10px;
                svg {
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }
        }
    }
    @-webkit-keyframes fadeInDownBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
    
    @keyframes fadeInDownBig {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0,-2000px,0);
            transform: translate3d(0,-2000px,0)
        }
    
        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
    }
}
